<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="mainContainer">
			<image :src="item.detailImage" mode="widthFix" @tap="islandShow=true"></image>
		</view>
		<!-- <view class="islandimgs" v-show="islandShow">
			<view class="island_imgs">
				<image :src="img" mode="widthFix" v-for="(img,idx) in item.skipImageList" :key="idx"></image>
			</view>
		</view> -->
		<!-- <u-popup :show="islandShow" mode="center" @close="closeIsland">
			<view class="island_imgs">
				<image :src="img" mode="widthFix" v-for="(img,idx) in item.skipImageList" :key="idx"></image>
			</view>
		</u-popup> -->

		<view class="dtdl">
			<image :src="img.picImage" mode="widthFix" v-for="(img,idx) in item.skipList" :key="idx" @tap="toIslandMap(img.skipGuideVal)"></image>
		</view>
		<view class="allxc" v-if="recommendJourneies.length>0" v-for="(item,index) in recommendJourneies" :key="index">
			<view class="xingchengkaikuang" v-if="index==0">
				<image src="https://i.ringzle.com/file/20240223/d84b58bceb0148968005eb8c0de4e0c9.png" mode=""></image>
			</view>
			<view class="dayone">
				<view class="diyitian">
					<view class="diyitian1">
						<view class="yinying"></view>
						{{item.name}}
					</view>
					<view class="diyitian2">
						<!-- <view class="cuinima" >
							{{item1}}				
					    </view>
						<view class="cuinima" v-if='index1<item.nameList.length-1'>—</view> -->
						
						<view class="yanshabi" >
							{{item.nameList.join('—')}}
								<!-- 	<text class="cuinima1">
										{{item1}}			
									</text>
									<text class="cuinima2" v-if='index1<item.nameList.length-1'>
											—		
									</text>	 -->	
						</view>	
					</view>
				</view>
				<view class="tuijian">
					<!-- 推荐游览：{{item.recommendReasonList[item.current]}} -->
					推荐游览：{{item.recommendReason}}
				</view>
				<u-swiper :list="item.coverImgList" interval="5000" :circular="true" @change="e=>changeImage(e,index)" @click="e=>turnScene(e,index)" :autoplay="true"
					indicator height='450rpx' style="margin-bottom: 30rpx;">
				</u-swiper>
				<view class="tuijianzhusu" v-if="item.scenicSpotList.length>0">
					<image src="https://i.ringzle.com/file/20240223/9e4a437da24b4d099b73a7f4a72640c0.png" mode="">
					</image>
				</view>
				<view class="content-list" v-if="item.scenicSpotList.length>2">
					<u-scroll-list>
						<view v-for="(item1,index1) in item.scenicSpotList" :key="index1" @tap="toHotelDetails(item1)">
							<view class="card">
								<view class="image">
									<image :src="item1.generalSpot.coverImage" mode="aspectFill"></image>
								</view>
								<view class="text">
									<view class="minsuname1">
										{{item1.generalSpot.name}}
									</view>
									<view class="minsuname2" v-if="item1.generalSpot.startPrice">
										<span class="jiage1">¥</span>
										<span class="jiage2">{{item1.generalSpot.startPrice}}</span>
										<span class="jiage3">起</span>
									</view>
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
				<view class="content-list2" v-else-if="item.scenicSpotList.length==2">
						<view class="card" v-for="(item1,index1) in item.scenicSpotList" :key="index1" @tap="toHotelDetails(item1)">
							<view class="image">
								<image :src="item1.generalSpot.coverImage" mode="aspectFill"></image>
							</view>
							<view class="text">
								<view class="minsuname1">
									{{item1.generalSpot.name}}
								</view>
								<view class="minsuname2" v-if="item1.generalSpot.startPrice">
									<span class="jiage1">¥</span>
									<span class="jiage2">{{item1.generalSpot.startPrice}}</span>
									<span class="jiage3">起</span>
								</view>
							</view>
						</view>
				</view>
				<view class="content-list2" v-else-if="item.scenicSpotList.length==1">
				<view class="card" v-for="(item1,index1) in item.scenicSpotList" :key="index1" @tap="toHotelDetails(item1)">
					<view class="image">
						<image :src="item1.generalSpot.coverImage" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="minsuname1">
							{{item1.generalSpot.name}}
						</view>
						<view class="minsuname2" v-if="item1.generalSpot.startPrice">
							<span class="jiage1">¥</span>
							<span class="jiage2">{{item1.generalSpot.startPrice}}</span>
							<span class="jiage3">起</span>
						</view>
					</view>
				</view>
				</view>
				<view class="content-list3" v-else-if="item.scenicSpotList.length==0">
				</view>
				
			</view>
			<view class="wuxiao">
			</view>
			<view class="goumai" @click="goToDetail" v-if="index==recommendJourneies.length-1">
				购买船票
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recommendJourneies:[],
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '路线详情',	
				item:null,
				islandShow:false
			}
		},
		onLoad(option) {
			console.log('111111111111111111', option)

			this.getList(option.id)

		},
		methods: {
			toIslandMap(islandIdStr){
				uni.navigateTo({
					url: '/pages/touristMap/index?islandIdStr=' + islandIdStr
				});
			},
			closeIsland(){
				this.islandShow = false;
			},
			getList(e) {
				this.$api.get('/api/customrec/queryGuideRouteDetail/'+e, {}).then(res => {
					if (res.data.code === 0) {
						this.item = res.data.data;
						this.recommendJourneies = res.data.data.scheduleList;
						this.recommendJourneies.forEach((d,i)=>{
							this.$set(this.recommendJourneies[i],'current',0);
						})
						 console.log('2323232',this.recommendJourneies)
					} else this.$showModal(res.data.msg);
				})
			},
			goToDetail(id) {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/index'
				})
			},
			changeImage(e, index) {
				this.$set(this.recommendJourneies[index],'current',e.current);
			},
			turnScene(e,index){
				let slitem = this.item.scheduleList[index];
				let rsitem = slitem.recSpotList[e];
				if(!rsitem.generalSpot.spotId) return
				uni.removeStorageSync('spid_old');
				uni.removeStorageSync('price_old');
				uni.navigateTo({
					url: "/pagesTrip/scenicSpots/spotDetail?spid=" + rsitem.generalSpot.mapId + '&price=' + rsitem.generalSpot.startPrice +
						'&isBuy=' + rsitem.generalSpot.isBuy + '&islandName=' + rsitem.generalSpot.name
				})
			},
			toHotelDetails(item){
				uni.navigateTo({
					url: "/pagesTrip/hotel/details/index?list=" +
						JSON.stringify([{
							homestayId: item.generalSpot.spotId,
							name: item.name,
							arriveDate:new Date().Format('yyyy-MM-dd'),
							leaveDate:new Date(new Date().setDate(new Date().getDate() + 1)).Format('yyyy-MM-dd')
						}])
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.islandimgs{
		width: 100%;
		height: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10070;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		.island_imgs{
			width: 100%;
			max-height: 80%;
			overflow-y: auto;
			&>image{
				width: 100%;
				margin-top: 24rpx;
			}
		}
	}
	::v-deep .u-popup__content{
		width: calc(100% - 24rpx);
		max-height: 80%;
		overflow-y: auto;
		border-radius: 24rpx;
		padding: 0 24rpx 12rpx;
		box-sizing: border-box;
		.island_imgs{
			&>image{
				width: 100%;
				margin-top: 24rpx;
			}
		}
	}
	
	.content-list3{
		width: 100%;
		height: 20rpx;
	}
	.content-list2{
		width: 100%;
		height: 434rpx;
		display: flex;
		justify-content: space-around;
		.card {
			border-radius: 20rpx;
			width: 280rpx;
			height: 395rpx;
			margin: 0rpx 10rpx 15rpx;
			background-color: #fff;
			// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
		
			.image {
				border-radius: 14rpx;
				width: 280rpx;
				height: 280rpx;
		
				image {
					border-radius: 14rpx;
					width: 100%;
					height: 100%;
				}
			}
		
			.text {
				width: 100%;
				min-height: 108rpx;
			}
		}
	}
	.wuxiao{
		width: 100%;
		height: 40rpx;
	}
	.goumai{
		width: 702rpx;
		height: 88rpx;
		background: #33AFFC;
		border-radius: 44rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		font-style: normal;
		margin: 0 auto 40rpx auto;
	}
	.jiage3 {
		width: 22rpx;
		height: 54rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #ABB0B5;
		line-height: 54rpx;
		text-align: justify;
		font-style: normal;
	}

	.jiage2 {
		height: 54rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #FF4141;
		line-height: 54rpx;
		text-align: justify;
		font-style: normal;
		padding: 0 5rpx;
	}

	.jiage1 {
		width: 16rpx;
		height: 54rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 25rpx;
		color: #FF4141;
		line-height: 54rpx;
		text-align: justify;
		font-style: normal;
		padding-left: 20rpx;
	}

	.minsuname2 {
		width: 100%;
		height: 54rpx;
	}

	.minsuname1 {
		font-family: PingFang-SC, PingFang-SC;
		    font-weight: bold;
		    font-size: 25rpx;
		    color: #333333;
		    text-align: justify;
		    font-style: normal;
		    padding-left: 20rpx;
		    padding-right: 20rpx;
		    margin: 8px 0 2px;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
		    -webkit-line-clamp: 1;
		    overflow: hidden;
	}

	.content-list {
		.card {
			border-radius: 20rpx;
			width: 280rpx;
			height: 395rpx;
			margin: 0rpx 10rpx 15rpx;
			background-color: #fff;
			// box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

			.image {
				border-radius: 14rpx;
				width: 280rpx;
				height: 280rpx;

				image {
					border-radius: 14rpx;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: 100%;
				min-height: 108rpx;
			}
		}

	}

	.tuijianzhusu {
		width: 690rpx;
		height: 120rpx;
		margin-top: 20rpx;

		image {
			width: 690rpx;
			height: 100rpx;
		}
	}

	.tuijian {
		width: 690rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #111111;
		line-height: 42rpx;
		text-align: justify;
		font-style: normal;
		margin-bottom: 40rpx;
	}

	.diyitian2 {
		 width: 568rpx;
		margin-left: 20rpx;
		display: flex;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.yanshabi{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			.cuinima1{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #111111;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
			.cuinima2{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #111111;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				padding: 0 10rpx;
			}
		}
		
		.cuinima{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #111111;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.yinying {
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: linear-gradient(180deg, rgba(118, 173, 247, 0) 0%, #6EABFD 100%);
	}

	.diyitian1 {
		position: relative;
		width: 100rpx;
		font-family: DingTalk, DingTalk;
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
		text-align: right;
		font-style: normal;
	}

	.diyitian {
		width: 100%;
		display: flex;
		// justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.dayone {
		width: 690rpx;
		margin: 0 auto 40rpx auto;
	}

	.xingchengkaikuang {
		width: 100%;
		height: 166rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 250rpx;
			height: 78rpx;
		}
	}
		
	.dtdl{
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #D5E7FF;
		image{
			width: 100%;
			margin-top: 34rpx;
		}
	}

	.allxc {
		width: 100%;
		background: #D5E7FF;
		padding-bottom: 10rpx;
	}

	.mainContainer {
		width: 100%;
		background: #D5E7FF;

		image {
			width: 100%;
		}
	}
</style>